<%@ page import="list.model.Tag" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--分组--%>
<style>
    .contacts-h {
        padding-top: 36px;
        padding-bottom: 10px;
        color: RGB(192, 194, 196);
    }

    .contacts-d {
        margin-top: 5px;
    }

    .tagInput {
        border: none;
        background-color: transparent;
    }

    .tagEdit:hover {
        cursor: hand;
    }

    .contacts {
        width: 100%;
    }

    .selected {
        background-color: #CADEFC;
    }

</style>
<ul class="contacts js-group" style="overflow: auto; height: 800px;">
    <li class="contacts-h">联系人
        <a href="module/route.jsp?opt=insert&key=tag&tag=<%=tag%>">
            <span class="btn-sm glyphicon glyphicon-plus pull-right"></span>
        </a>
    </li>
    <li class="contacts-d">
        <div class="input-group <%=(tag==0?"selected":null)%>">
            <input type="hidden" name="id" value=0>
            <input class="form-control tagInput" type="text" value="所有联系人">
            <span class="input-group-addon tagInput">
            <span class="badge" id="userCount"><%=user.getNumOfContacts()%></span>
        </span>
        </div>
    </li>
    <% if (null != user.getTags()) {
        for (Tag item : user.getTags()) {%>
    <li class="contacts-d">
        <div class="input-group <%=(tag==item.getId()?"selected":null)%>">
            <input type="hidden" name="id" value="<%=item.getId()%>">
            <input class="form-control tagInput" type="text" name="name" value="<%=item.getName()%>">
            <span class="input-group-addon tagInput">
                <span class="badge count"><%=item.getCount()%></span>
                <span class="glyphicon glyphicon-pencil tagEdit"></span>
                <span class="glyphicon glyphicon-trash text-danger contact_delete"></span>
            </span>
        </div>
    </li>
    <%
            }
        }
        if (tag == -1) {
    %>
    <li class="contacts-d">
        <div class="input-group selected">
            <input type="hidden" name="id" value=0>
            <input class="form-control tagInput" type="text" value="搜索结果">
            <span class="input-group-addon tagInput">
            <span class="badge"><%=output.length%></span>
        </span>
        </div>
    </li>
    <%}%>
</ul>
<script>
    $(function () {
        $(".contact_delete").click(function () {
            $.get("module/route.jsp", {
                "opt": "delete",
                "key": "tag",
                "id": $(this).parent().siblings("input[name='id']").val()
            });
            $(this).parentsUntil("li").detach();
        });

        $("span.tagEdit").click(function () {
            $(this).parent().siblings("input[name='name']").focus();
        });
        $("input.tagInput").click(function () {
            const id = $(this).siblings("input[name='id']").val();
            const user_id = $("#user_id").val();
            window.location.href = "?opt=to&tag=" + id;
        });
        $("input.tagInput").change(function () {
            var id = $(this).siblings("input[name='id']").val();
            const user_id = $("#user_id").val();
            if (id > 0) {
                const value = $(this).val();
                $.get("module/route.jsp", {
                    "opt": "update",
                    "key": "tag",
                    "id": id,
                    "val": value,
                    "tag": $("#tag").val()
                }, function (data) {
                    //修改结果
                });
            } else {
                $(this).val("所有联系人");
            }
        });
    });
</script>